/**
 * @Title: index.js
 * @Description: index
 * @author: Fanchao
 * @date: 2020/12/17 1:53 下午
 * @version V1.0
 */

import React, { useEffect, useState } from 'react';
import { Table, Button, Popconfirm, Modal, message } from 'antd';
import styles from './index.less';
import SectionTitle from 'components/SectionTitle';
import AddSomeButton from 'components/AddSomeButton';
import FilterByKeyWord from 'components/FilterByKeyWord';
import { connect } from 'umi';
import UserModal from '@/pages/evaluations/the-objects-student/components/UserModal';
import storageUtils from 'utils/storage';
import { getEvaluateStudentDetailList, restStudentObjectEvaluate } from 'api/index';

const TeachersEvaluations = ({ teacherEvaluations: { dataSource, keyword, reqPageInfo, modalTitle, modalVisible }, dispatch, loading }) => {
    const isAdmin = storageUtils.getUser().userRoleTypes.includes('Admin');
    const [visible, setVisible] = useState(false);
    const [sourceData, setSourceData] = useState([]);
    const [sourceLoading, setSourceLoading] = useState(false);
    useEffect(() => {
        dispatch({
            type: 'teacherEvaluations/getDataSource',
            payload: {
                keyword: '',
                reqPageInfo: {
                    pageNumber: 1,
                    pageSize: 10,
                },
            },
        });
    }, []);
    const fetchSource = (evaluateStudentId) => {
        setSourceLoading(true);
        getEvaluateStudentDetailList({ evaluateStudentObjectId: evaluateStudentId }).then(res => {
            if (res.status === 'success') {
                const sourceData = res.result || [];
                setSourceData(sourceData);
            } else {
                message.error(res.message);
                setSourceData([]);
            }
            setSourceLoading(false);
        });
    };
    const getSource = (evaluateStudentId) => {
        setVisible(true);
        fetchSource(evaluateStudentId);
    };
    const handleReset = (evaluateStudentId) => {
        restStudentObjectEvaluate({ evaluateStudentObjectId: evaluateStudentId }).then(res => {
            if (res.status === 'success') {
                message.success('已重置');
                dispatch({
                    type: 'teacherEvaluations/getDataSource',
                    payload: {
                        keyword: '',
                        reqPageInfo: {
                            pageNumber: 1,
                            pageSize: 10,
                        },
                    },
                });
            } else {
                message.error(res.message);
            }
        });
    };
    const columns = [
        {
            title: '教学班',
            dataIndex: 'classNo',
            align: 'left',

        },
        {
            title: '学员队',
            dataIndex: 'departmentName',
            align: 'left',
        },
        {
            title: '学年',
            align: 'left',
            dataIndex: 'schoolYear',
        },
        {
            title: '学期',
            dataIndex: 'semester',
            align: 'left',
        },
        {
            title: '评价分数',
            align: 'left',
            render: (item) => <span style={{ cursor: 'pointer', color: item.hasAllEvaluate ? 'red' : '#424242' }}
                                    onClick={() => getSource(item.evaluateStudentId)}>{item.evaluateScore}</span>,
        },
        isAdmin ? (
            {
                title: '操作',
                align: 'left',

                render: (item) => {
                    return (
                        <div>
                            <Popconfirm title="是否要重置成绩？" onConfirm={() => handleReset(item.evaluateStudentId)}>
                                <Button style={{ padding: 2, color: '#C21217', fontWeight: 'bold' }}
                                        type="link">重置成绩</Button>
                            </Popconfirm>
                        </div>
                    );
                },
            }
        ) : {},
    ];
    const title = '成绩发布';

    const addItem = (item) => {
        dispatch({
            type: 'teacherEvaluations/getTeacherOptionList',
            payload: {},
        });
        dispatch({
            type: 'teacherEvaluations/setModalTitle',
            payload: '成绩发布',
        });
        dispatch({
            type: 'teacherEvaluations/setModalVisible',
            payload: true,
        });
        dispatch({
            type: 'teacherEvaluations/setItemData',
            payload: item,
        });
    };
    const updateItem = (item) => {
        dispatch({
            type: 'teacherEvaluations/setModalTitle',
            payload: '修改评定对象',
        });
        dispatch({
            type: 'teacherEvaluations/setModalVisible',
            payload: true,
        });
        dispatch({
            type: 'teacherEvaluations/setItemData',
            payload: item,
        });
    };
    const handleDelete = (item) => {
        dispatch({
            type: 'teacherEvaluations/removeEvaluateObject',
            payload: {
                evaluateObjectId: item.evaluateObjectId,
            },
            callback: (result) => {
                if (result) {
                    dispatch({
                        type: 'teacherEvaluations/getDataSource',
                        payload: {
                            keyword,
                            reqPageInfo: {
                                pageNumber: reqPageInfo.pageNumber,
                                pageSize: reqPageInfo.pageSize,
                            },
                        },
                    });
                }
            },
        });
    };
    const searchByKeyWord = (keyword) => {
        dispatch({
            type: 'teacherEvaluations/getDataSource',
            payload: {
                keyword,
                reqPageInfo: {
                    pageNumber: reqPageInfo.pageNumber,
                    pageSize: reqPageInfo.pageSize,
                },
            },
        });
    };
    const searchByPageNumber = (pageNumber) => {
        dispatch({
            type: 'teacherEvaluations/getDataSource',
            payload: {
                keyword,
                reqPageInfo: {
                    pageNumber,
                    pageSize: reqPageInfo.pageSize,
                },
            },
        });
    };
    return (
        <div className={styles.pageContainer}>
            {
                isAdmin ? (
                    <div className={styles.pageContainerHeader}>
                        <SectionTitle title={title}/>
                        <div className={styles.btnGroup}>
                            <div style={{ width: '220px' }} onClick={() => addItem({})}>
                                <AddSomeButton title={title}/>
                            </div>
                        </div>
                    </div>
                ) : null
            }

            <div className={styles.pageContainerTable}>
                <SectionTitle title={'教员评学'}/>
                <FilterByKeyWord onSearch={keyword => searchByKeyWord(keyword)}
                                 onReset={keyword => searchByKeyWord(keyword)}/>
                <div className={styles.tableContainer}>
                    <Table
                        bordered={false} // 是否有边框
                        rowKey='evaluateObjectId' // 唯一key值
                        loading={loading} // 加载动画
                        columns={columns} // 表头
                        dataSource={dataSource.contentList}
                        pagination={{
                            total: dataSource.totalElements,// 总记录数
                            defaultPageSize: 10, // 默认显示条数
                            showQuickJumper: true, // 快速跳转
                            showSizeChanger: true, // 一页展示数据条数
                            onChange: (pageNumber) => searchByPageNumber(pageNumber),
                            showTotal: () => {
                                return `共${dataSource.totalElements}条`;
                            },
                        }}
                    />
                </div>
            </div>
            <UserModal
                title={modalTitle}
                visible={modalVisible}
            />
            <Modal
                title="打分情况"
                visible={visible}
                width="900px"
                footer={null}
                onCancel={() => {
                    setVisible(false);
                }}
            >
                <Table
                    bordered={false} // 是否有边框
                    rowKey='evaluateObjectId' // 唯一key值
                    loading={sourceLoading} // 加载动画
                    columns={[
                        {
                            title: '教学班',
                            dataIndex: 'classNo',
                            align: 'left',

                        }, {
                            title: '课程名称',
                            dataIndex: 'courseName',
                            align: 'left',

                        }, {
                            title: '评价分数',
                            dataIndex: 'evaluateScore',
                            align: 'left',

                        }, {
                            title: '是否评价',
                            dataIndex: 'hasEvaluate',
                            align: 'left',

                        }, {
                            title: '教员姓名',
                            dataIndex: 'teacherUserName',
                            align: 'left',

                        },
                    ]}
                    dataSource={sourceData}
                    pagination={null}
                />
            </Modal>
        </div>
    );
};

export default connect(({ teacherEvaluations, dispatch, loading }) => ({
    teacherEvaluations,
    dispatch,
    loading: loading.effects['teacherEvaluations/getDataSource'],
}))(TeachersEvaluations);
